<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Checkout with PayPal Demo</title>
      <!--Including Bootstrap style files-->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

      <style>
          /* http://angrytools.com/gradient/ */
          .bg-color {
              color: white;
              background: -moz-linear-gradient(0deg, #004094 0%, #0096D9 50%, #004094 100%); /* ff3.6+ */
              background: -webkit-gradient(linear, left top, right top, color-stop(0%, #004094), color-stop(50%, #0096D9), color-stop(100%, #004094)); /* safari4+,chrome */
              background: -webkit-linear-gradient(0deg, #004094 0%, #0096D9 50%, #004094 100%); /* safari5.1+,chrome10+ */
              background: -o-linear-gradient(0deg, #004094 0%, #0096D9 50%, #004094 100%); /* opera 11.10+ */
              background: -ms-linear-gradient(0deg, #004094 0%, #0096D9 50%, #004094 100%); /* ie10+ */
              background: linear-gradient(90deg, #004094 0%, #0096D9 50%, #004094 100%); /* w3c */
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004094', endColorstr='#004094',GradientType=1 ); /* ie6-9 */
          }
          .mark{
              max-width: 45%;
          }
          .mark-input-field{
              height:30px !important;
          }
      </style>
  </head>
  <body class="container-fluid">
     
      <div class="well bg-color">
          <h2 class="text-center">Checkout with PayPal Demo</h2>
          <h4 class="text-center">REST API with Checkout.js v4</h4>
      </div>
      <div class="container" id="normal-flow">
      <div class="row">
      	<div class="col-md-3">
      		 
             <!--Demo Product details -->
             <table>
             <tr><h3> DIGITAL SLR CAMERA </h3></tr>
             <tr><img src="img/camera.jpg" width="300" height="250" class="img-responsive"/></tr>
             <tr><td><p class="lead"> Buyer Credentials:</p></td></tr>
             <tr><td>Email-id:&nbsp;&nbsp;&nbsp;<input type="text" id="buyer_email" class="form-control" name="buyer_email" readonly/> </td></tr>
             <tr><td>Password:<input type="text" id="buyer_password" class="form-control" name="buyer_password" readonly/></td></tr>
             </table>
           </div>
	   	<div class="col-md-4">
	   		  <form class="form-group">
	   		  		  <div class="">
	                      <p class="lead"> Item Specifications:</p>
	                      <table class="table">
	                       <tr><td>Item Name:</td><td><input type="text" class="form-control" name="L_PAYMENTREQUEST_0_NAME0" value="DSLR Camera" readonly/></td></tr>
	                       <tr><td>Item ID: </td><td><input type="text" class="form-control" name="L_PAYMENTREQUEST_0_NUMBER0" value="A0123" readonly/></td></tr>
	                       <tr><td>Description:</td><td><input type="text" class="form-control" name="L_PAYMENTREQUEST_0_DESC0" value="Autofocus Camera" readonly/></td></tr>
	                       <tr><td>Quantity:</td><td><input type="text" class="form-control" name="L_PAYMENTREQUEST_0_QTY0" value="1" readonly/></td></tr>
	                       <tr><td>Price:</td><td><input type="text" class="form-control"name="PAYMENTREQUEST_0_ITEMAMT" value="10.00" readonly/></td></tr>
	                       <tr><td>Tax:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_TAXAMT"  value="2" readonly/></td></tr>
	                       <tr><td>Shipping Amount:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_SHIPPINGAMT" value="5" readonly/></td></tr>
	                       <tr><td>Handling Amount:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_HANDLINGAMT" value="1" readonly/></td></tr>
	                       <tr><td>Shipping Discount:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_SHIPDISCAMT" value="-3" readonly/></td></tr>
	                       <tr><td>Insurance Amount:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_INSURANCEAMT" value="2" readonly/></td></tr>
	                       <tr><td>Total Amount:</td><td><input type="text" class="form-control" name="PAYMENTREQUEST_0_AMT" value="17" readonly/></td></tr>
	                    	<tr><td><input type="hidden" class="form-control" name="LOGOIMG" value="http://10.37.90.190/demoportaldev/demo/img/logo.jpg" /></td></tr>
			            <tr><td>Currency Code:</td><td><select class="form-control" name="currencyCodeType" id="currencyCodeType" readonly>
						<option value="USD" selected>USD</option><br></td></tr>
	                       <tr><td>Payment Type: </td><td><input type="text" class="form-control" name="paymentType" value="sale" readonly/><br></td></tr>
	                       <tr><td colspan="2"><br/><br/><div id="paymentMethods"></div></td></tr>
	                       <tr><td><input style="margin-top:10px" type="button" id="proceedCheckoutButton" alt="Proceed to Checkout" class="btn btn-primary btn-large" value="Proceed to Checkout" name="checkout"></td></tr>
						<tr></tr>
						<tr><td ></td></tr>
	                      </table>
	                </div>
	          	</form>
	   </div>
		<div class="col-md-5">
			   <div class="row-fluid">
			         <div class="span12 inner-span">
			               <h4 > README: </h4>
			               <p>
			                  1) Click on 'PayPal Checkout' button and see the experience.
			                  <br>
			                  2) If you get any Firewall warning, add rule to the Firewall to allow incoming connections for your application.
			                  <br>
			                  3) Try Checkout with PayPal using a buyer sandbox account provided on this page. And you're done! Or you can use Proceed to Checkout for Express Checkout Mark flow.
			                  <br>
			                  4) The sample code uses default sandbox credentials which are set in 'application.properties'. You can create your own credentials by creating PayPal Seller and Buyer accounts on Sandbox  <i><a href="https://developer.paypal.com/webapps/developer/applications/accounts/create" target="_blank">here</a></i>.
			                  <br>
			                  5) Make following changes in 'application.properties':<br>
			                  - If using your own Sandbox seller account, update  CLIENT_ID and SECRET values with your sandbox credentials<br>
			                  - IS_APPLICATION_IN_SANDBOX: Kept true for working with Sandbox, it will be false for live.<br>
			                  </p>
			              
			         		<p>For Integration follow the below link </p>
			         		<p><a target="_blank" href="https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/">https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/</a></p>
			               
			
			         </div>
			      </div>
			   </div>
	   </div>
	   </div>
	   <div id="address-block" style="display:none">
	   <div class="row">
	   	<div class="col-md-3 col-md-offset-4">
	   		<form class="form">
              
                  <div class="span6 inner-span" id="mark-form-container">
                        <p class="lead">Shipping Address</p>
                        <table class="table ">
                       
                        <tr><td width="30%">First Name</td><td><input class="mark-input-field form-control" type="text" id="L_PAYMENTREQUEST_FIRSTNAME" name="L_PAYMENTREQUEST_FIRSTNAME" value="Pam"/></td></tr>
                        <tr><td>Last Name:</td><td><input class="mark-input-field form-control"  type="text" id="L_PAYMENTREQUEST_LASTNAME" name="L_PAYMENTREQUEST_LASTNAME" value="Jones"/></td></tr>
                        <tr><td>Address</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOSTREET" name="PAYMENTREQUEST_0_SHIPTOSTREET" value="55 East 52nd Street"/></td></tr>
                        <tr><td>Address 1</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOSTREET2" name="PAYMENTREQUEST_0_SHIPTOSTREET2" value="21st Floor"/></td></tr>
                        <tr><td>City:</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOCITY" name="PAYMENTREQUEST_0_SHIPTOCITY" value="New York" /></td></tr>
                        <tr><td>State:</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOSTATE" name="PAYMENTREQUEST_0_SHIPTOSTATE" value="NY" /></td></tr>
                        <tr><td>Postal Code:</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOZIP" name="PAYMENTREQUEST_0_SHIPTOZIP" value="10022" /></td></tr>
                        <tr><td>Country</td><td><select class="form-control" id="PAYMENTREQUEST_0_SHIPTOCOUNTRY" name="PAYMENTREQUEST_0_SHIPTOCOUNTRY">
							<option value="AF">Afghanistan</option>
							<option value="AX">Aland Islands</option>
							<option value="AL">Albania</option>
							<option value="DZ">Algeria</option>
							<option value="AS">American Samoa</option>
							<option value="AD">Andorra</option>
							<option value="AO">Angola</option>
							<option value="AI">Anguilla</option>
							<option value="AQ">Antarctica</option>
							<option value="AG">Antigua and Barbuda</option>
							<option value="AR">Argentina</option>
							<option value="AM">Armenia</option>
							<option value="AW">Aruba</option>
							<option value="AU">Australia</option>
							<option value="AT">Austria</option>
							<option value="AZ">Azerbaijan</option>
							<option value="BS">Bahamas</option>
							<option value="BH">Bahrain</option>
							<option value="BD">Bangladesh</option>
							<option value="BB">Barbados</option>
							<option value="BY">Belarus</option>
							<option value="BE">Belgium</option>
							<option value="BZ">Belize</option>
							<option value="BJ">Benin</option>
							<option value="BM">Bermuda</option>
							<option value="BT">Bhutan</option>
							<option value="BO">Bolivia</option>
							<option value="BA">Bosnia and Herzegovina</option>
							<option value="BW">Botswana</option>
							<option value="BV">Bouvet Island</option>
							<option value="BR">Brazil</option>
							<option value="IO">British Indian Ocean Territory</option>
							<option value="BN">Brunei Darussalam</option>
							<option value="BG">Bulgaria</option>
							<option value="BF">Burkina Faso</option>
							<option value="BI">Burundi</option>
							<option value="KH">Cambodia</option>
							<option value="CM">Cameroon</option>
							<option value="CA">Canada</option>
							<option value="CV">Cape Verde</option>
							<option value="KY">Cayman Islands</option>
							<option value="CF">Central African Republic</option>
							<option value="TD">Chad</option>
							<option value="CL">Chile</option>
							<option value="CN">China</option>
							<option value="CX">Christmas Island</option>
							<option value="CC">Cocos (Keeling) Islands</option>
							<option value="CO">Colombia</option>
							<option value="KM">Comoros</option>
							<option value="CG">Congo</option>
							<option value="CD">Congo, The Democratic Republic of The</option>
							<option value="CK">Cook Islands</option>
							<option value="CR">Costa Rica</option>
							<option value="CI">Cote D'ivoire</option>
							<option value="HR">Croatia</option>
							<option value="CU">Cuba</option>
							<option value="CY">Cyprus</option>
							<option value="CZ">Czech Republic</option>
							<option value="DK">Denmark</option>
							<option value="DJ">Djibouti</option>
							<option value="DM">Dominica</option>
							<option value="DO">Dominican Republic</option>
							<option value="EC">Ecuador</option>
							<option value="EG">Egypt</option>
							<option value="SV">El Salvador</option>
							<option value="GQ">Equatorial Guinea</option>
							<option value="ER">Eritrea</option>
							<option value="EE">Estonia</option>
							<option value="ET">Ethiopia</option>
							<option value="FK">Falkland Islands (Malvinas)</option>
							<option value="FO">Faroe Islands</option>
							<option value="FJ">Fiji</option>
							<option value="FI">Finland</option>
							<option value="FR">France</option>
							<option value="GF">French Guiana</option>
							<option value="PF">French Polynesia</option>
							<option value="TF">French Southern Territories</option>
							<option value="GA">Gabon</option>
							<option value="GM">Gambia</option>
							<option value="GE">Georgia</option>
							<option value="DE">Germany</option>
							<option value="GH">Ghana</option>
							<option value="GI">Gibraltar</option>
							<option value="GR">Greece</option>
							<option value="GL">Greenland</option>
							<option value="GD">Grenada</option>
							<option value="GP">Guadeloupe</option>
							<option value="GU">Guam</option>
							<option value="GT">Guatemala</option>
							<option value="GG">Guernsey</option>
							<option value="GN">Guinea</option>
							<option value="GW">Guinea-bissau</option>
							<option value="GY">Guyana</option>
							<option value="HT">Haiti</option>
							<option value="HM">Heard Island and Mcdonald Islands</option>
							<option value="VA">Holy See (Vatican City State)</option>
							<option value="HN">Honduras</option>
							<option value="HK">Hong Kong</option>
							<option value="HU">Hungary</option>
							<option value="IS">Iceland</option>
							<option value="IN">India</option>
							<option value="ID">Indonesia</option>
							<option value="IR">Iran, Islamic Republic of</option>
							<option value="IQ">Iraq</option>
							<option value="IE">Ireland</option>
							<option value="IM">Isle of Man</option>
							<option value="IL">Israel</option>
							<option value="IT">Italy</option>
							<option value="JM">Jamaica</option>
							<option value="JP">Japan</option>
							<option value="JE">Jersey</option>
							<option value="JO">Jordan</option>
							<option value="KZ">Kazakhstan</option>
							<option value="KE">Kenya</option>
							<option value="KI">Kiribati</option>
							<option value="KP">Korea, Democratic People's Republic of</option>
							<option value="KR">Korea, Republic of</option>
							<option value="KW">Kuwait</option>
							<option value="KG">Kyrgyzstan</option>
							<option value="LA">Lao People's Democratic Republic</option>
							<option value="LV">Latvia</option>
							<option value="LB">Lebanon</option>
							<option value="LS">Lesotho</option>
							<option value="LR">Liberia</option>
							<option value="LY">Libyan Arab Jamahiriya</option>
							<option value="LI">Liechtenstein</option>
							<option value="LT">Lithuania</option>
							<option value="LU">Luxembourg</option>
							<option value="MO">Macao</option>
							<option value="MK">Macedonia, The Former Yugoslav Republic of</option>
							<option value="MG">Madagascar</option>
							<option value="MW">Malawi</option>
							<option value="MY">Malaysia</option>
							<option value="MV">Maldives</option>
							<option value="ML">Mali</option>
							<option value="MT">Malta</option>
							<option value="MH">Marshall Islands</option>
							<option value="MQ">Martinique</option>
							<option value="MR">Mauritania</option>
							<option value="MU">Mauritius</option>
							<option value="YT">Mayotte</option>
							<option value="MX">Mexico</option>
							<option value="FM">Micronesia, Federated States of</option>
							<option value="MD">Moldova, Republic of</option>
							<option value="MC">Monaco</option>
							<option value="MN">Mongolia</option>
							<option value="ME">Montenegro</option>
							<option value="MS">Montserrat</option>
							<option value="MA">Morocco</option>
							<option value="MZ">Mozambique</option>
							<option value="MM">Myanmar</option>
							<option value="NA">Namibia</option>
							<option value="NR">Nauru</option>
							<option value="NP">Nepal</option>
							<option value="NL">Netherlands</option>
							<option value="AN">Netherlands Antilles</option>
							<option value="NC">New Caledonia</option>
							<option value="NZ">New Zealand</option>
							<option value="NI">Nicaragua</option>
							<option value="NE">Niger</option>
							<option value="NG">Nigeria</option>
							<option value="NU">Niue</option>
							<option value="NF">Norfolk Island</option>
							<option value="MP">Northern Mariana Islands</option>
							<option value="NO">Norway</option>
							<option value="OM">Oman</option>
							<option value="PK">Pakistan</option>
							<option value="PW">Palau</option>
							<option value="PS">Palestinian Territory, Occupied</option>
							<option value="PA">Panama</option>
							<option value="PG">Papua New Guinea</option>
							<option value="PY">Paraguay</option>
							<option value="PE">Peru</option>
							<option value="PH">Philippines</option>
							<option value="PN">Pitcairn</option>
							<option value="PL">Poland</option>
							<option value="PT">Portugal</option>
							<option value="PR">Puerto Rico</option>
							<option value="QA">Qatar</option>
							<option value="RE">Reunion</option>
							<option value="RO">Romania</option>
							<option value="RU">Russian Federation</option>
							<option value="RW">Rwanda</option>
							<option value="SH">Saint Helena</option>
							<option value="KN">Saint Kitts and Nevis</option>
							<option value="LC">Saint Lucia</option>
							<option value="PM">Saint Pierre and Miquelon</option>
							<option value="VC">Saint Vincent and The Grenadines</option>
							<option value="WS">Samoa</option>
							<option value="SM">San Marino</option>
							<option value="ST">Sao Tome and Principe</option>
							<option value="SA">Saudi Arabia</option>
							<option value="SN">Senegal</option>
							<option value="RS">Serbia</option>
							<option value="SC">Seychelles</option>
							<option value="SL">Sierra Leone</option>
							<option value="SG">Singapore</option>
							<option value="SK">Slovakia</option>
							<option value="SI">Slovenia</option>
							<option value="SB">Solomon Islands</option>
							<option value="SO">Somalia</option>
							<option value="ZA">South Africa</option>
							<option value="GS">South Georgia and The South Sandwich Islands</option>
							<option value="ES">Spain</option>
							<option value="LK">Sri Lanka</option>
							<option value="SD">Sudan</option>
							<option value="SR">Suriname</option>
							<option value="SJ">Svalbard and Jan Mayen</option>
							<option value="SZ">Swaziland</option>
							<option value="SE">Sweden</option>
							<option value="CH">Switzerland</option>
							<option value="SY">Syrian Arab Republic</option>
							<option value="TW">Taiwan, Province of China</option>
							<option value="TJ">Tajikistan</option>
							<option value="TZ">Tanzania, United Republic of</option>
							<option value="TH">Thailand</option>
							<option value="TL">Timor-leste</option>
							<option value="TG">Togo</option>
							<option value="TK">Tokelau</option>
							<option value="TO">Tonga</option>
							<option value="TT">Trinidad and Tobago</option>
							<option value="TN">Tunisia</option>
							<option value="TR">Turkey</option>
							<option value="TM">Turkmenistan</option>
							<option value="TC">Turks and Caicos Islands</option>
							<option value="TV">Tuvalu</option>
							<option value="UG">Uganda</option>
							<option value="UA">Ukraine</option>
							<option value="AE">United Arab Emirates</option>
							<option value="GB">United Kingdom</option>
							<option value="US" selected>United States</option>
							<option value="UM">United States Minor Outlying Islands</option>
							<option value="UY">Uruguay</option>
							<option value="UZ">Uzbekistan</option>
							<option value="VU">Vanuatu</option>
							<option value="VE">Venezuela</option>
							<option value="VN">Viet Nam</option>
							<option value="VG">Virgin Islands, British</option>
							<option value="VI">Virgin Islands, U.S.</option>
							<option value="WF">Wallis and Futuna</option>
							<option value="EH">Western Sahara</option>
							<option value="YE">Yemen</option>
							<option value="ZM">Zambia</option>
							<option value="ZW">Zimbabwe</option>
							</select></td>
						</tr>
                        <tr><td>Telephone:</td><td><input class="mark-input-field form-control" type="text" id="PAYMENTREQUEST_0_SHIPTOPHONENUM" name="PAYMENTREQUEST_0_SHIPTOPHONENUM" value="123123123123" maxlength="12"/></td></tr>
						<tr>
							<td colspan="2">
								<div class="form-group">
									  <label for="sel1">Shipping Detail:</label>
									  <select class="form-control" id="shipping_detail" >
									 	<optgroup label="United Parcel Service" style="font-style:normal;">
											<option value="2">Worldwide Expedited - $2.00</option>
											<option value="3">Worldwide Express Saver - $3.00</option>
										</optgroup>
										<optgroup label="Flat Rate" style="font-style:normal;">
											<option value="0.00" selected="">Fixed - $0.00</option>
										</optgroup>
									  </select>
									</div>
							</td>
						</tr>
							
                       
							<tr><td colspan="2"><p class="lead">Payment Methods:</p></td></tr>	
							<tr><td colspan="2">
								<input id="paypal_payment_option" value="paypal_express" type="radio" name="paymentMethod" title="PayPal Express Checkout" class="radio" checked>
								<img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&amp;buttontype=ecmark&amp;locale=en_US" alt="Acceptance Mark" class="v-middle">&nbsp;
								<a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside" onclick="javascript:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, ,left=0, top=0, width=400, height=350'); return false;">What is PayPal?</a>
							</td></tr>
							<tr><td colspan="2"><input id="p_method_paypal_express" value="credit_card" type="radio" name="paymentMethod" title="PayPal Express Checkout" class="radio" disabled>&nbsp;<img src="img/card-mark.png" alt="Accepting Visa, Mastercard, Discover and American Express" class="mark"></td></tr>
							<tr><td>&nbsp;</td></tr>
					
                        </table>
                       
                       <div id="paymentMethodsWithReview"></div>

                  </div>
              
            </form>
	   	</div>
	   </div>
	   		
	   		
	   </div>
     
      <div id="confirmation" style="display:none">
      	<div class="row">
      			<div class="col-md-4 col-md-offset-4">
      				<div>
      					<div><h3>Review Order and Proceed to Pay</h3></div>
      					<div>Shipping Address</div>
      					<table class="table" style="margin-top:10px">
      						<tr><td>Name :</td><td><span id="recipient_name"></span></td></tr>
      						<tr><td>Address :</td><td><span id="line1"></span><span id="line2"></span></td></tr>
   							<tr><td>City :</td><td><span id="city"></span></td></tr>
   							<tr><td>State :</td><td><span id="state"></span></td></tr>
   							<tr><td>Postal Code :</td><td><span id="postal_code"></span></td></tr>
   							<tr><td>Country Code :</td><td><span id="country_code"></span></td></tr>
      						<tr><td>Amount :</td><td><span id="amount"></span></td></tr>
      						<tr><td>Currency :</td><td><span id="currency"></span></td></tr>
      					</table>
      				
			      			<div class="loader" style="margin-left: 150px; display:none" >
								<i  class="fa fa-refresh fa-spin" style="font-size:30px"></i>
							</div>
      						<input style="margin-top:10px" type="button" id="payNowButton" alt="Proceed to Checkout" class="btn btn-primary btn-large" value="Pay Now" name="checkout">
      				</div>
      			</div>
      	</div>
      </div>
    <script src="//www.paypalobjects.com/api/checkout.js" ></script>
 	<script src="https://code.jquery.com/jquery.js"></script>
 	<script type="text/javascript">
      function getRandomNumberInRange(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
      }


      var buyerCredentials = [{"email":"ron@hogwarts.com", "password":"qwer1234"},
                        {"email":"sallyjones1234@gmail.com", "password":"p@ssword1234"},
                        {"email":"joe@boe.com", "password":"123456789"},
                        {"email":"hermione@hogwarts.com", "password":"123456789"},
                        {"email":"lunalovegood@hogwarts.com", "password":"123456789"},
                        {"email":"ginnyweasley@hogwarts.com", "password":"123456789"},
                        {"email":"bellaswan@awesome.com", "password":"qwer1234"},
                        {"email":"edwardcullen@gmail.com", "password":"qwer1234"}];
      var randomBuyer = getRandomNumberInRange(0,buyerCredentials.length);

      document.getElementById("buyer_email").value =buyerCredentials[randomBuyer].email;
      document.getElementById("buyer_password").value =buyerCredentials[randomBuyer].password;
	
      $('#proceedCheckoutButton').on('click', function(){
    	  $('#address-block').show();
    	  $('#normal-flow').hide();
    	  
      })
      
   </script>
 	
 	 <script>
        paypal.Button.render({

            env: 'sandbox', // Or 'production',

            commit: false, // Show a 'Pay Now' button
			
            payment: function() {
                // Set up the payment here
                // 1. call your server side method or api to intiate the paymnets
                var data = {
                	"description" : $("input[name=L_PAYMENTREQUEST_0_DESC0]").val(),
                	"shipping":$("input[name=PAYMENTREQUEST_0_SHIPPINGAMT]").val(),
                	"tax":$("input[name=PAYMENTREQUEST_0_TAXAMT]").val(),
                	"shipping_discount":$("input[name=PAYMENTREQUEST_0_SHIPDISCAMT]").val(),
                	"total":$("input[name=PAYMENTREQUEST_0_AMT]").val(),
                	"currency":$("#currencyCodeType").val(),
                	"intent":$("input[name=paymentType]").val(),
                	"subtotal":$("input[name=PAYMENTREQUEST_0_ITEMAMT]").val(),
                	"name":$("input[name=L_PAYMENTREQUEST_0_NAME0]").val(),
                	"price":$("input[name=PAYMENTREQUEST_0_ITEMAMT]").val(),
                	"quantity":$("input[name=L_PAYMENTREQUEST_0_QTY0]").val(),
                	"handling_fee" : $("input[name=PAYMENTREQUEST_0_HANDLINGAMT]").val(),
                	"insurance":$("input[name=PAYMENTREQUEST_0_INSURANCEAMT]").val(),
                	"customFlag" :"false"
                }
                //return paypal.request.post('/api/create-payments')
             	return paypal.request({
				    method: 'post',
				    url: 'CreatePayment',
				    json: data
				})
                .then(function(res) {
					console.log(res.id);
                    return res.id;
                }); 
            },

            onAuthorize: function(data, actions) {
				// Set up a url on your server to execute the payment
				var EXECUTE_URL = 'ExecutePayments';
			    var data = {
	                    paymentID: data.paymentID,
	                    payerID: data.payerID
	                    
	                };
	                              
				return actions.payment.get().then(function(paymentDetails) {
					
					$('#address-block').hide();
					$("#normal-flow").hide();
					// show the confirmation in the page section
                	$("#recipient_name").text(paymentDetails.payer.payer_info.shipping_address.recipient_name)
                	$("#line1").text(paymentDetails.payer.payer_info.shipping_address.line1)
                	$("#line2").text(paymentDetails.payer.payer_info.shipping_address.line2)
               		$("#city").text(paymentDetails.payer.payer_info.shipping_address.city)
               		$("#state").text(paymentDetails.payer.payer_info.shipping_address.state)
               		$("#postal_code").text(paymentDetails.payer.payer_info.shipping_address.postal_code)
               		$("#country_code").text(paymentDetails.payer.payer_info.shipping_address.country_code)
                	$("#amount").text(paymentDetails.transactions[0].amount.total)
                	$("#currency").text(paymentDetails.transactions[0].amount.currency)
               		$("#confirmation").show(); // show confirmation block 
                	
                	// Click Listener 	
	                   document.querySelector('#payNowButton').addEventListener('click', function() {
	                	   
	                	   $('.loader').show()
	                	   return paypal.request({
	       				    method: 'post',
	       				    url: 'ExecutePayments',
	       				    json: data
		       				}).then(function(res) {
		                       	window.location.href="SucessPageServlet?token="+res.id+"&payerID="+res.payer.payer_info.payer_id;
		       			       }).catch(function(err){
		       						alert(err);
		       				});
	               	    })
                	});
                
           
           },
          	 onCancel: function(data, actions) {
          			return actions.redirect();
				}


        }, '#paymentMethods');
    </script>
    
     <script>
        paypal.Button.render({

            env: 'sandbox', // Or 'production',

            commit: true, // Show a 'Pay Now' button
			
            payment: function() {
            	var shipping_amt = $('#shipping_detail').find(":selected").val();
            	var total = parseInt($("input[name=PAYMENTREQUEST_0_AMT]").val()) -
            			    parseInt($("input[name=PAYMENTREQUEST_0_SHIPPINGAMT]").val())
            		total = total + parseInt(shipping_amt);
            
            	// Set up the payment here
                // 1. call your server side method or api to intiate the paymnets
                var data = {
                	"description" : $("input[name=L_PAYMENTREQUEST_0_DESC0]").val(),
                	"shipping":shipping_amt,
                	"tax":$("input[name=PAYMENTREQUEST_0_TAXAMT]").val(),
                	"shipping_discount":$("input[name=PAYMENTREQUEST_0_SHIPDISCAMT]").val(),
                	"total": total,
                	"currency":$("#currencyCodeType").val(),
                	"intent":$("input[name=paymentType]").val(),
                	"subtotal":$("input[name=PAYMENTREQUEST_0_ITEMAMT]").val(),
                	"name":$("input[name=L_PAYMENTREQUEST_0_NAME0]").val(),
                	"price":$("input[name=PAYMENTREQUEST_0_ITEMAMT]").val(),
                	"quantity":$("input[name=L_PAYMENTREQUEST_0_QTY0]").val(),
                	"handling_fee" : $("input[name=PAYMENTREQUEST_0_HANDLINGAMT]").val(),
                	"insurance":$("input[name=PAYMENTREQUEST_0_INSURANCEAMT]").val(),
                	
                	"recipient_name": $("input[name=L_PAYMENTREQUEST_FIRSTNAME]").val()+ " " + $("input[name=L_PAYMENTREQUEST_LASTNAME]").val(),
            	    "line1": $("input[name=PAYMENTREQUEST_0_SHIPTOSTREET]").val(),
            	    "line2": $("input[name=PAYMENTREQUEST_0_SHIPTOSTREET2]").val(),
            	    "city": $("input[name=PAYMENTREQUEST_0_SHIPTOCITY]").val(),
            	    "country_code":$("#PAYMENTREQUEST_0_SHIPTOCOUNTRY").val(),
            	    "postal_code": $("input[name=PAYMENTREQUEST_0_SHIPTOZIP]").val(),
            	    "phone": $("input[name=PAYMENTREQUEST_0_SHIPTOPHONENUM]").val(),
            	    "state": $("input[name=PAYMENTREQUEST_0_SHIPTOSTATE]").val(),
            	    "customFlag" : "true"
                	    
                }
            	console.log(data)
                //return paypal.request.post('/api/create-payments')
             	return paypal.request({
				    method: 'post',
				    url: 'CreatePayment',
				    json: data
				})
                .then(function(res) {
					console.log(res.id);
                    return res.id;
                }); 
            },

            onAuthorize: function(data, actions) {
				
			    // Set up a url on your server to execute the payment
				var EXECUTE_URL = 'ExecutePayments';

                // Set up the data you need to pass to your server
				//alert(data.paymentID);
                var data = {
                    paymentID: data.paymentID,
                    payerID: data.payerID
                };
                
                return paypal.request({
   				    method: 'post',
   				    url: 'ExecutePayments',
   				    json: data
       				}).then(function(res) {
                       	window.location.href="SucessPageServlet?token="+res.id+"&payerID="+res.payer.payer_info.payer_id;
       			       }).catch(function(err){
       						alert(err);
       				});
                
              
           	},
          	 onCancel: function(data, actions) {
					return actions.redirect();
				}


        }, '#paymentMethodsWithReview');
    </script>
	</body>
</html>